<!-- 历史估产记录 -->
<template>
  <BaseMainSlot :show-btn-box="false">
    <template v-slot:search-box>
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p v-if="activeName === '1'">收起筛选</p>
              <p v-if="activeName === ''">展开筛选</p>
            </div>
          </template>
          <div class="search-btn search-btns" @click.stop="search()">
            <i class="el-icon-circle-check"></i>
            <p>查询</p>
          </div>

          <div class="select-box-content">
            <div class="select-box-content-name"> {{ switchBar ? '吊水' : '传统' }}批次编号</div>
            <el-select filterable clearable v-model="productionBatchId" filterable clearable>
              <el-option v-for="(item, index) in batchList" :key="index"
                :label="`${item.mnecode}_${item.varietyName}`" :value="item.productionBatchId" />
            </el-select>
          </div>

          <!-- <div v-show="switchBar == 1" class="select-box-content">
            <div class="select-box-content-name">鱼塘名称</div>
            <el-select filterable clearable v-model="fishPondId" filterable clearable>
              <el-option v-for="(item, index) in pondList" :key="index" :label="item.pondName" :value="item.fishPondId" />
            </el-select>
          </div> -->

          <div class="select-box-content">
            <div class="select-box-content-name">估产人</div>
            <el-select filterable clearable v-model="searchList.staffId" filterable clearable @clear='clrarName'>
              <el-option v-for="(item, index) in staffList" :key="index" :label="item.staffName" :value="item.staffId" />
            </el-select>
          </div>

          <div v-show="switchBar == 0" class="select-box-content select-box-leng-content">
            <div class="select-box-content-name">记录日期</div>
            <el-date-picker v-model="searchList.date" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable />
          </div>

          <div v-show="switchBar == 1" class="select-box-content">
            <div class="select-box-content-name">估产日期</div>
            <el-date-picker v-model="predictDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" clearable />
          </div>
        </el-collapse-item>
      </el-collapse>
      <ActionBar :export-active="true" :hasExport="true" :hasAdd="false" :hasDel="false" :page-no="162"
        @exportFile="exportFile" />
    </template>

    <!-- 传统/吊水切换 -->
    <template v-slot:category-Box>
      <CategoryBar :categoryList="categoryList" @categoryBar="categoryBar" />
    </template>

    <template v-slot:table-box>
      <el-table v-loading="false" :data="tableData" stripe border height="calc(100% - 50px)" @row-click="handleEdit"
        @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" :selectable="(row) => { return !row.selectable }" /> -->
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column v-if="switchBar == 1" prop="pondName" label="鱼塘名称" />
        <el-table-column v-if="switchBar == 0" prop="fishPondName" label="鱼塘名称" />
        <el-table-column v-if="switchBar == 0" prop="mnecode" min-width="200" label="估产批次" />
        <el-table-column v-if="switchBar == 0" prop="samplingQuantity" min-width="100" label="抽检数量（尾）" />
        <el-table-column v-if="switchBar == 0" prop="avgWeight" min-width="100" label="估产均重（斤）" />
        <el-table-column v-if="switchBar == 1" prop="specificationName" label="估产百分比">
          <template v-if="scoped.row.minRate" slot-scope="scoped">
            {{ scoped.row.minRate + '% ~ ' + scoped.row.maxRate + '%' }}
          </template>
        </el-table-column>
        <el-table-column v-if="switchBar == 1" prop="batchName" label="批次编号" />
        <el-table-column min-width="120" :prop="switchBar == 0 ? 'totalWeight' : 'predictWeight'" label="估产重量（斤）" />
        <el-table-column min-width="120" prop="density" label="标准养殖密度" />
        <el-table-column min-width="120" prop="estimateDensity" label="实际养殖密度" />
        <el-table-column min-width="120" prop="staffName" label="估产人" />
        <el-table-column min-width="120" :prop="switchBar == 0 ? 'samplingDateTime' : 'predictDate'" label="估产日期" />
        <el-table-column min-width="120" label="详情">
          <template v-if="scope.row.predictYieldId" slot-scope="scope">
            <el-button type="text" class="text-btn-cursor" @click="view(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 导出 -->
      <ExportBtn ref="ExportBtn" :btnName="switchBar == 0 ? '传统估产报表' : '吊水估产报表'"
        :apiName="switchBar == 0 ? 'predictYieldExport' : 'hangingBreedPredictYieldExport'" :searchObj="searchObj">
      </ExportBtn>
      <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
        @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
    </template>

    <template v-slot:dialog>
      <el-dialog :title="(titleText || '') + '估产信息'" :visible.sync="dialogFormVisible" :before-close="cancel" width="40%">
        <el-form ref="formData" label-position="left" :model="formData" class="el-form" :rules="rules"
          :disabled="nowChanceStau === ''" :show-message="isshowrulemessage">

          <el-form-item v-if="switchBar == 0" label="批次编号:" prop="batchList" class="w50p">
            <el-select filterable clearable v-model="formData.batchList" value-key="productionBatchId" clearable filterable placeholder="请选择批次"
              @change="getspecification">
              <el-option v-for="item in batchList" :key="item.productionBatchId"
                :label="`${item.mnecode}_${item.varietyName}`" :value="{
                  productionBatchId: item.productionBatchId,
                  fishVarietyId: item.fishVarietyId,
                  varietyName: item.varietyName,
                  fishPondId: item.fishPondId
                }" />
            </el-select>
          </el-form-item>

          <el-form-item v-if="switchBar == 1" label="批次编号:" class="w50p">
            <el-input v-model="hangingWaterForm.batchName" />
          </el-form-item>

          <el-form-item v-if="switchBar == 1" label="估产百分比:" class="w50p">
            <el-input v-model="hangingWaterForm.rateStr" />
          </el-form-item>

          <el-form-item v-if="switchBar == 1" label="系统计算重量:" class="w50p">
            <el-input v-model="hangingWaterForm.minMaxWeight">
              <template slot="append">斤</template>
            </el-input>
          </el-form-item>

          <el-form-item v-if="switchBar == 1" label="估产重量:" class="w50p">
            <el-input v-model="hangingWaterForm.predictWeight">
              <template slot="append">斤</template>
            </el-input>
          </el-form-item>

          <el-form-item v-if="switchBar == 0" label="抽检鱼数量:" prop="samplingQuantity" class="w50p">
            <el-input v-model="formData.samplingQuantity" placeholder="输入抽检数量" clearable
              @change="samplingQuantityChange" />
          </el-form-item>

          <el-form-item label="估产人:" prop="staffName" class="w50p">
            <el-select filterable clearable v-model="formData.staffName" filterable clearable placeholder="请选择">
              <el-option v-for="item in staffList" :key="item.staffId" :label="item.staffName" :value="item.staffName" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="switchBar == 1" label="估产日期:" class="w50p">
            <el-input v-model="hangingWaterForm.predictDate">
            </el-input>
          </el-form-item>

          <el-form-item v-if="switchBar == 0" label="估产日期:" prop="samplingDateTime" class="w50p">
            <el-date-picker v-model="formData.samplingDateTime" type="datetime" value-format="yyyy-MM-dd hh:mm:ss"
              clearable />
          </el-form-item>
          <el-divider></el-divider>

          <el-form-item v-for="(predictYieldData, index) in formData.predictYieldDetailList" :key="predictYieldData.key"
            class="w100p">
            <el-form-item label="规格:" :prop="'predictYieldDetailList.' + index + '.specificationId'" :rules="{
              required: true,
              message: '规格不能为空',
              trigger: 'change',
            }" class="w50p">
              <el-select filterable clearable v-model="predictYieldData.specificationId" placeholder="选择规格" filterable clearable>
                <el-option v-for="(item, index) in specificationList" :key="index" :label="item.specificationName"
                  :value="item.specificationId" />
              </el-select>
            </el-form-item>
            <el-form-item label="鱼重" :prop="'predictYieldDetailList.' + index + '.weight'" class="w50p">
              <el-input v-model="predictYieldData.weight" placeholder="输入单条重量" clearable>
                <template slot="append">斤</template>
              </el-input>
            </el-form-item>
            <div class="w100p addE">
              <div class="line-clicks" v-if="(nowChanceStau === 'edit')"
                @click="countList(predictYieldData, predictYieldData.predictYieldId)">{{ predictYieldData.predictYieldId ?
                  '修改' : '添加' }}</div>
              <div class="line-clicks"
                v-if="nowChanceStau === 'edit' && formData.predictYieldDetailList.length > 1 && predictYieldData.predictYieldId"
                @click="delProduceList(predictYieldData, index)">删除</div>
              <div class="line-click"
                v-if="(formData.predictYieldDetailList.length > 1 && nowChanceStau === 'add') || (formData.predictYieldDetailList.length > 1 && nowChanceStau === 'edit' && !predictYieldData.predictYieldId)"
                @click="delCountList(index)">
                <i class="el-icon-minus"></i>
              </div>
              <div
                v-if="nowChanceStau === 'add' && index === formData.predictYieldDetailList.length - 1 || nowChanceStau === 'edit' && index === formData.predictYieldDetailList.length - 1"
                class="line-click" @click="addCountList()">
                <i class="el-icon-plus"></i>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" v-if="nowChanceStau !== ''" class="dialog-footer">
          <el-button class="cancelbtn" @click="cancel('formData')">取 消</el-button>
          <el-button class="savebtn" type="primary" @click="save('formData')">保 存</el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import BaseMainSlot from "./components/newBaseMainSlot.vue";
import ExportBtn from "@/components/ExportBtn";
import CategoryBar from "@/components/CategoryBar"; // 切换栏
import { mymixin } from "@/utils/mixins";
import { mapGetters } from "vuex";

import InPondEstimationApi from "@/api/in-pond-estimation";
import InPondEstimationDetailApi from "@/api/in-pond-estimation/in-pond-estimation-detail";
import InPondEstimationHandingApi from "@/api/in-pond-estimation/in-pond-estimation-handing" // 吊水估产
import BatchMangeApi from "@/api/batch-mange" // 吊水批次列表
import BatchApi from "@/api/batch-mange/index";
import FishPondApi from "@/api/basic-info-manage/fishPond";
import StaffApi from "@/api/basic-info-manage/staff/index";
import specificationApi from "@/api/basic-info-manage/specification/index";
// import EnumApi from "@/api/enum";
export default {
  name: "InPondEstimation",
  components: { ActionBar, Pagination, BaseMainSlot, ExportBtn, CategoryBar },
  mixins: [mymixin],
  data () {
    return {
      searchObj: {},
      productionBatchId: "",//批次ID
      staffName: '',//经手人
      samplingDateTime: "",//经手日期
      // 搜索框对象
      searchList: {},
      isshowrulemessage: false,
      // 下拉选择框相关
      // 传统/吊水查询-批次选择列表
      batchList: [],
      // 吊水批次选择列表
      wbatchList: [],
      // 吊水批次查看表单数据
      hangingWaterForm: {
        batchName: '',      // 批次编号
        rateStr: '',        // 估产百分比
        minMaxWeight: '',   // 系统计算重量
        predictWeight: '',  // 估产重量
        predictDate: '',    // 估产日期
      },
      pondList: [],        // 传统/吊水查询-鱼塘选择列表
      fishPondId: "",      // 养殖鱼塘ID
      predictDate: "",     // 吊水-查询估产日期
      // 估产规格
      specificationList: [],
      // 估产单位
      unitList: [],
      // 切换栏
      categoryList: [
        { id: 0, mark: "tradition", name: "鱼塘估产（传统）", },
        { id: 1, mark: "hangingWater", name: "鱼塘估产（吊水）", },
      ],
      switchBar: 0,  // 
      rules: {
        batchList: [
          { required: true, message: "请选择批次", trigger: "change" }
        ],
        fishPondId: [
          { required: true, message: "请选择鱼塘", trigger: "change" }
        ],
        staffName: [
          { required: true, message: "请选择估产人", trigger: "change" }
        ],
        samplingDateTime: [
          { required: true, message: "请选择估产日期", trigger: "change" }
        ]
      },
      name: "",
      staffList: []
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {
    nowChanceStau (newvalue) {
      if (newvalue === "add" || newvalue === "") {
        this.formData = {
          batchList: {}
        };
        this.$set(this.formData, "predictYieldDetailList", [{ key: Date.now() }]);
      }
      if (newvalue === "add") {
        batchApi.queryByCondition({ status: "UN_COMPLETE" }).then(res => {
          this.batchList = res.data;
        });
      }
      if (newvalue === "") {
        this.isshowrulemessage = false;
      } else {
        this.isshowrulemessage = true;
      }
    }
  },
  created () {
    this.formData = {
      batchList: {}
    };
  },
  mounted () {
    this.search();
    this.getselectdatalist();
  },
  methods: {
    clrarName () {
      delete this.searchList.staffId
    },
    // 切换项
    categoryBar (item) {
      this.currentPage = 1;
      if (item.id == 0) {
        this.switchBar = 0
        console.log('', item.name, this.switchBar);
        this.getTableDataList()    // 表格
        this.getselectdatalist()  // 查询列表
      }
      if (item.id == 1) {
        this.switchBar = 1
        console.log('', item.name, this.switchBar);
        this.getTableDataList()    // 表格
        this.getselectdatalist()  // 查询列表
      }
    },
    // 查看
    view (row) {
      this.dialogFormVisible = true
      console.log('row**********', row);
      this.hangingWaterForm.batchName = row.batchName // 批次编号
      this.hangingWaterForm.rateStr = row.rateStr     // 估产百分比
      this.hangingWaterForm.minMaxWeight = `${row.minWeight}~${row.maxWeight}` // 系统计算重量
      this.hangingWaterForm.predictWeight = row.predictWeight  // 估产重量
      this.hangingWaterForm.predictDate = row.predictDate      // 估产日期
    },
    dateToFormat (originDate) {
      const dt = new Date(originDate);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");

      const hh = (dt.getHours() + "").padStart(2, "0");
      const mm = (dt.getMinutes() + "").padStart(2, "0");
      const ss = (dt.getSeconds() + "").padStart(2, "0");

      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
    },
    // 获取当前拥有类型表格
    getTableDataList () {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          ...this.searchList
        }
      };
      if (this.fishPondId) params.entity.fishPondId = this.fishPondId;    // 吊水-鱼塘名称查询
      if (this.predictDate) params.entity.predictDate = this.predictDate; // 吊水-估产日期查询
      if (this.productionBatchId) params.entity.productionBatchId = this.productionBatchId;
      // if (this.staffName) params.entity.staffName = this.staffName;
      if (this.searchList?.date) {
        params.entity.samplingDateTimeStart = this.searchList.date[0] + ' 00:00:00';
        params.entity.samplingDateTimeEnd = this.searchList.date[1] + ' 23:59:59';
      }
      this.searchObj = JSON.parse(JSON.stringify(params.entity))
      // 获取传统
      if (this.switchBar == 0) {
        // this.showApi=
        InPondEstimationApi.queryPageByCondition(params).then(res => {
          this.loading = false;
          if (res.errCode !== undefined) {
            this.$message.error("表格获取失败");
          }
          let data = res.data.content;
          // 赋值总条数
          this.totalSize = res.data.totalElements;
          // 赋值数组
          this.tableData = data;
          this.addblankmet();
          this.resetActionBar();
        });
      }
      // 获取吊水
      if (this.switchBar == 1) {
        InPondEstimationHandingApi.queryPageByCondition(params).then(res => {
          this.loading = false;
          if (res.errCode !== undefined) {
            this.$message.error("表格获取失败");
          }
          let data = res.data.content;
          // 赋值总条数
          this.totalSize = res.data.totalElements;
          // 赋值数组
          this.tableData = data;
          this.addblankmet();
          this.resetActionBar();
        });
      }
      // this.showApi.queryPageByCondition(params).then(res => {
      //   this.loading = false;
      //   if (res.errCode !== undefined) {
      //     this.$message.error("表格获取失败");
      //   }
      //   let data = res.data.content;
      //   // 赋值总条数
      //   this.totalSize = res.data.totalElements;
      //   // 赋值数组
      //   this.tableData = data;
      //   this.addblankmet();
      //   this.resetActionBar();
      // });
    },
    // 获取下拉框数据 start
    async getselectdatalist () {
      // 查询-传统批次
      if (this.switchBar == 0) {
        BatchApi.queryByCondition({ breedTypeNo: 'TRADITIONAL_BREED' }).then(res => {
          this.batchList = res.data;
          this.productionBatchId = null
        })
      }
      if (this.switchBar == 1) {
        BatchMangeApi.queryByCondition({ breedTypeNo: 'HANGING_BREED' }).then(res => {
          this.batchList = res.data;
          this.productionBatchId = null
        })
      }
      // 查询-吊水获取鱼塘
      FishPondApi.queryByCondition().then(res => {
        this.pondList = res.data;
      })
      StaffApi.queryByCondition().then(res => {
        this.staffList = res.data;
      })
    },

    // 根据批次品种查询 规格
    async specification (e) {
      const { data: specification } = await specificationApi.queryByCondition({
        fishVarietyId: e
      });
      if (specification !== undefined) {
        this.specificationList = specification;
      } else this.specificationList = [];
    },

    // 通过品种id查估产规格
    getspecification (e) {
      this.$set(this.formData, "productionBatchId", e.productionBatchId);
      this.$set(this.formData, "fishVarietyId", e.fishVarietyId);
      this.$set(this.formData, "varietyName", e.varietyName);
      this.$set(this.formData, "fishPondId", e.fishPondId);
      this.specification(e.fishVarietyId);
    },
    samplingQuantityChange (e) {
      for (let i = 0; i < e - 1; i++) {
        this.addCountList(i);
      }
    },
    // 添加一条清单列表
    addCountList (i) {
      if (this.formData.productionBatchId && this.formData.fishPondId) {
        if (
          this.formData.predictYieldDetailList === undefined ||
          this.formData.predictYieldDetailList === null
        ) {
          this.$set(this.formData, "predictYieldDetailList", []);
        }
        let Obj = {
          key: i + Date.now()
        };
        this.formData.predictYieldDetailList.push({ ...Obj });
      } else {
        this.$message.warning("请先选择批次");
      }
    },
    // 删除一条清单列表
    delCountList (index) {
      if (this.formData.predictYieldDetailList.length === 1) {
        return;
      } else {
        this.formData.predictYieldDetailList.splice(index, 1);
      }
    },
    // 获取下拉框数据 ends
    // 表格操作 增删改查 start
    async handleEdit (row) {
      // if (produce !== undefined) {
      this.formData = {
        ...row,
        predictYieldDetailList: await this.queryDetail(row.predictYieldId)
      };
      this.$set(this.formData, "batchList", {
        productionBatchId: row.productionBatchId,
        fishVarietyId: row.fishVarietyId,
        predictYieldId: row.predictYieldId,
        fishPondId: row.fishPondIds
      });
      this.specification(row.fishVarietyId);
      this.addActive = true;
      this.editActive = true;
      this.saveActive = false;
      this.cancelActive = true;
    },
    //  查询详情
    async queryDetail (e) {
      const {
        data: produce
      } = await InPondEstimationDetailApi.queryByCondition({
        predictYieldId: e
      });
      if (produce !== undefined) {
        return produce;
      } else return [];
    },
    // 获取批量删除list
    handleSelectionChange (list) {
      this.nowselectedList = [];
      this.nowselectedList = list.map(item => {
        return item.predictYieldId;
      });
      if (this.nowselectedList && this.nowselectedList.length > 0) {
        this.delActive = true;
      } else this.delActive = false;
    },
    delmessage () {
      if (this.nowChanceStau === "del") {
        InPondEstimationApi.delListById(this.nowselectedList).then(res => {
          if (res.success) {
            this.search();
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        });
        this.nowChanceStau = "";
      }
    },
    // 估产详情添加修改
    countList (e, st) {
      if (!st || st === undefined) {
        let addparams = {
          ...e,
          predictYieldId: this.formData.predictYieldId
        };
        delete addparams.batchList;
        InPondEstimationDetailApi.add(addparams).then(async res => {
          if (res.success) {
            this.$set(
              this.formData,
              "predictYieldDetailList",
              await this.queryDetail(this.formData.predictYieldId)
            );
            this.$message.success("添加成功");
          } else {
            this.$message.error("添加失败");
          }
        });
      } else {
        let editparams = {
          ...e
        };
        InPondEstimationDetailApi.edit(editparams).then(res => {
          if (res.success) {
            this.$message.success("修改成功");
          } else {
            this.$message.error("修改失败");
          }
        });
      }
    },
    // 弹框内部list 删除
    delProduceList (e, index) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      })
        .then(() => {
          InPondEstimationDetailApi.delById(e.predictYieldDatailId).then(
            res => {
              if (res.success) {
                this.formData.predictYieldDetailList.splice(index, 1);
                this.$message.success("删除成功");
                // this.search();
              } else {
                this.$message.error("删除失败");
              }
            }
          );
        })
        .catch(() => {
          //
          this.$message("取消删除");
        });
    },
    // 删除
    handleDelete (data) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      })
        .then(() => {
          InPondEstimationApi.delById({ id: data.predictYieldId }).then(res => {
            if (res.success) {
              this.$message.success("删除成功");
              this.search();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          //
          this.$message("取消删除");
        });
    },
    save (formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.nowChanceStau === "add") {
            console.log(this.formData);
            let addparams = {
              ...this.formData
            };
            delete addparams.batchList;
            // console.log(addparams);
            InPondEstimationApi.add(addparams).then(res => {
              if (res.success) {
                this.search();
                this.$message.success("添加成功");
                this.$refs[formData].resetFields();
              } else {
                this.$message.error("添加失败");
              }
            });
          }
          if (this.nowChanceStau === "edit") {
            let editparams = {
              ...this.formData
            };
            delete editparams.batchList;

            InPondEstimationApi.edit(editparams).then(res => {
              if (res.success) {
                this.search();
                this.$message.success("修改成功");
                this.$refs[formData].resetFields();
              } else {
                this.$message.error("修改失败");
              }
            });
          }
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    }
    // 表格操作 增删改查 end
  }
};
</script>
<style lang="scss" scoped>
.line {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;

  .line-click {
    width: 30px;
    height: 30px;
    background-color: rgb(198, 196, 196);
    display: flex;
    justify-content: center;
    align-items: center;
    border: rgb(214, 214, 214) 1px solid;
    border-radius: 50%;
    margin-bottom: 10px;
    margin-top: 5px;
    margin-left: 5px;
    cursor: pointer;

    .el-icon-minus {
      color: white;
    }
  }
}

.line-click {
  width: 30px;
  height: 30px;
  background-color: rgb(198, 196, 196);
  display: flex;
  justify-content: center;
  align-items: center;
  border: rgb(214, 214, 214) 1px solid;
  border-radius: 50%;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: 20px;
  position: relative;
  right: 0;
  cursor: pointer;

  .el-icon-plus {
    color: white;
  }
}

.line-clicks {
  width: 30px;
  height: 30px;
  // background-color: rgb(198, 196, 196);
  display: flex;
  justify-content: center;
  align-items: center;
  // border: rgb(214, 214, 214) 1px solid;
  color: red;
  border-radius: 50%;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: 20px;
  text-decoration: underline;
  text-underline-position: under;
  position: relative;
  right: 0;
  cursor: pointer;
}

::v-deep .el-form-item {
  .el-form-item {
    margin-bottom: 20px;
  }
}

::v-deep .el-dialog {
  .el-dialog__body {
    max-height: 65vh;
  }
}

.addE {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>
